<template>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
        <div class="relative aspect-video">
            <!-- 动态加载图片 -->
            <img :src="getCharacterImage(category, character)" class="w-full h-full object-contain" alt="文章封面" />
            <div class="absolute bottom-2 left-2 flex space-x-2">
                <span class="px-2 py-1 bg-black/50 text-white text-sm rounded">
                    {{ category }}
                </span>
            </div>
        </div>

        <div class="p-4">
            <h3 class="text-lg font-semibold mb-2 dark:text-gray-100">{{ title }}</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">
                {{ summary }}
            </p>

            <div class="flex justify-between items-center text-sm">
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                    <span>{{ date }}</span>
                    <span>·</span>
                    <div class="flex items-center space-x-1">
                        <span>{{rank}}星魂</span>
                        <!-- <span>👍 {{ likes }}</span>
                        <span>💬 {{ comments }}</span> -->
                        
                    </div>
                </div>
                <router-link :to="`/article/${id}`" class="text-blue-500 hover:text-blue-600 transition-colors">
                    选择 →
                </router-link>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { onMounted } from 'vue'

// 定义组件属性
defineProps<{
    //id: string
    rank: string
    title: string
    //summary: string
    category: string  // 命途名称，如"存护"
    character: string // 角色名称，如"三月七"
    //date: string
    //likes: number
    //comments: number
}>()

// 动态获取角色图片路径
const getCharacterImage = (category: string, character: string) => {
    // 确保路径格式正确：/命途文件夹/角色名.webp
    console.log('hi',category);
    console.log(character)
    
    return `/characters/${character}.webp`
}

// 可选：预加载所有图片（适用于需要提前加载的场景）
const preloadImages = () => {
    const paths = [
        '/characters/1001.webp'
        // 添加其他所有图片路径...
    ]
    
    paths.forEach(path => {
        new Image().src = path
    })
}

// 组件挂载时预加载图片
onMounted(() => {
    preloadImages()
})
</script>